<template>
  <!--overview-生活-内务管理-->
  <div class="dormitory-management">
    <el-table :data="displayedData" style="width: 100%" height="250">
      <el-table-column prop="index" label="序号" width="80">
        <template #default="scope">
          {{ (currentPage - 1) * itemsPerPage + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="姓名" label="姓名" width="100"></el-table-column>
      <el-table-column prop="班级" label="班级"></el-table-column>
      <el-table-column prop="组别" label="组别"></el-table-column>
      <el-table-column prop="检查日期" label="检查日期"></el-table-column>
      <el-table-column prop="床铺质量" label="床铺质量"></el-table-column>
      <el-table-column prop="物品摆放" label="物品摆放"></el-table-column>
      <el-table-column prop="卫生擦拭" label="卫生擦拭"></el-table-column>
      <el-table-column prop="分数" label="分数"></el-table-column>
      <el-table-column prop="评分" label="评分">
        <template #default="scope">
          <span :class="getRatingClass(scope.row.评分)">
            {{ scope.row.评分 }}
          </span>
        </template>
      </el-table-column>
      <!--      <el-table-column prop="检查时间" label="检查时间"></el-table-column>-->
      <!--      <el-table-column prop="年级" label="年级"></el-table-column>-->
    </el-table>
    <!--    <div class="table-container">-->
    <!--      <table>-->
    <!--        <thead>-->
    <!--          <tr>-->
    <!--            <th>序号</th>-->
    <!--            <th>姓名</th>-->
    <!--            <th>年级</th>-->
    <!--            <th>班级</th>-->
    <!--            <th>床铺质量</th>-->
    <!--            <th>物品摆放</th>-->
    <!--            <th>卫生擦拭</th>-->
    <!--            <th>总分</th>-->
    <!--            <th>评分</th>-->
    <!--            <th>检查时间</th>-->
    <!--          </tr>-->
    <!--        </thead>-->
    <!--        <tbody>-->
    <!--          <tr v-for="(item, index) in displayedData" :key="index">-->
    <!--            <td>{{ index + 1 }}</td>-->
    <!--            <td>{{ item.姓名 }}</td>-->
    <!--            <td>{{ item.年级 }}</td>-->
    <!--            <td>{{ item.班级 }}</td>-->
    <!--            <td>{{ item.床铺质量 }}</td>-->
    <!--            <td>{{ item.物品摆放 }}</td>-->
    <!--            <td>{{ item.卫生擦拭 }}</td>-->
    <!--            <td>{{ item.总分 }}</td>-->
    <!--            <td :class="getRatingClass(item.评分)">{{ item.评分 }}</td>-->
    <!--            <td>{{ item.检查时间 }}</td>-->
    <!--          </tr>-->
    <!--        </tbody>-->
    <!--      </table>-->
    <!--    </div>-->

    <div class="pagination">
      <button :disabled="currentPage === 1" @click="changePage(currentPage - 1)">
        上一页
      </button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button :disabled="currentPage === totalPages" @click="changePage(currentPage + 1)">
        下一页
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "DormitoryManagement",
  data() {
    return {
      dormitoryData: [],
      filteredData: [],
      currentPage: 1,
      itemsPerPage: 15,
      total: 0,
      loading: false,
    };
  },
  computed: {
    displayedData() {
      return this.filteredData;
    },
    totalPages() {
      return Math.ceil(this.total / this.itemsPerPage);
    },
  },
  mounted() {
    this.loadData();
  },
  methods: {
    async loadData(page = 1) {
      this.loading = true;
      try {
        const response = await this.$overviewapi.getHousekeeping({ pageNum: page, pageSize: this.itemsPerPage });
        if (response && (response.code === '200' || response.code === 200) && Array.isArray(response.data)) {
          this.processData(response.data);
          this.total = 15 * this.itemsPerPage; // 写死总条数为15页
          this.currentPage = page;
        } else {
          throw new Error('API返回数据格式不正确');
        }
      } catch (error) {
        console.error("加载内务数据失败:", error);
      } finally {
        this.loading = false;
      }
    },

    processData(dataArr) {
      if (!Array.isArray(dataArr) || dataArr.length === 0) {
        this.dormitoryData = [];
        this.filteredData = [];
        return;
      }

      // 处理每一行数据
      const data = dataArr.map((item, idx) => {
        // 评分字段
        const totalScore = parseInt(item.score);
        let rating = "未评";
        if (!isNaN(totalScore)) {
          if (totalScore <= 5) {
            rating = "差";
          } else if (totalScore <= 7) {
            rating = "良";
          } else {
            rating = "优";
          }
        }
        return {
          ...item,
          评分: rating,
          index: idx + 1, // 可选：序号
          姓名: item.name,
          班级: item.classes,
          组别: item.groupName,
          检查日期: item.checkDate,
          床铺质量: item.quality,
          物品摆放: item.placement,
          卫生擦拭: item.clean,
          分数: item.score,
        };
      });

      // 按分数从高到低排序
      this.dormitoryData = data.sort((a, b) => parseInt(b.分数) - parseInt(a.分数));
      this.filteredData = [...this.dormitoryData];
    },

    getRatingClass(rating) {
      console.log(rating, "优");
      if (rating === "优") return "rating-good";
      if (rating === "良") return "rating-medium";
      if (rating === "差") return "rating-bad";
      return "";
    },

    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.loadData(page);
    },
  },
};
</script>

<style lang="scss" scoped>
.dormitory-management {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  box-sizing: border-box;
  .rating-good {
    color: #67c23a;
    font-weight: bold;
  }

  .rating-medium {
    color: #e6a23c;
    font-weight: bold;
  }

  .rating-bad {
    color: #f56c6c;
    font-weight: bold;
  }
  :deep(.el-table) {
    background-color: transparent;
    height: 100%;
    border: 2px solid #68d8fe;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(104, 216, 254, 0.3);

    th {
      background: linear-gradient(to bottom, #2c3e50, #1d2127) !important;
      border-bottom: 2px solid #68d8fe;
      border-right: 1px solid #68d8fe;
      font-weight: bold;
      padding: 15px 0;
      font-size: 16px !important;
      color: #68d8fe !important;
    }

    td {
      background-color: rgba(29, 33, 39, 0.8);
      border-bottom: 1px solid #68d8fe;
      border-right: 1px solid #68d8fe;
      color: #fff;
      padding: 12px 0;
      transition: background-color 0.2s ease;
    }

    .even-row td {
      background-color: rgba(29, 33, 39, 0.8);
    }

    .odd-row td {
      background-color: rgba(19, 25, 47, 0.8);
    }

    .el-table__row:hover > td {
      background-color: rgba(45, 50, 62, 0.9) !important;
    }

    .el-table__header-wrapper {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      overflow: hidden;
    }

    .el-table__body-wrapper {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
      overflow-y: auto !important;
      overflow-x: hidden;
      max-height: 100%;
      scrollbar-width: thin;
      scrollbar-color: #68d8fe #1d2127;

      &::-webkit-scrollbar {
        width: 8px;
      }

      &::-webkit-scrollbar-track {
        background: #1d2127;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #68d8fe;
        border-radius: 4px;
        border: 2px solid #1d2127;
      }
    }

    // Remove last column's right border
    th:last-child,
    td:last-child {
      border-right: none;
    }

    // Fix border issues
    &::before {
      display: none;
    }

    .el-table__fixed::before,
    .el-table__fixed-right::before {
      display: none;
    }
  }

  .search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    .search-box {
      position: relative;
      width: 300px;

      input {
        width: 100%;
        padding: 8px 30px 8px 10px;
        border: 1px solid rgba(104, 216, 254, 0.5);
        background-color: rgba(19, 25, 47, 0.8);
        color: #d3d6dd;
        border-radius: 4px;
        outline: none;

        &::placeholder {
          color: rgba(211, 214, 221, 0.5);
        }
      }

      i {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #68d8fe;
      }
    }

    .filter-options {
      display: flex;
      gap: 15px;

      .filter-item {
        display: flex;
        align-items: center;

        span {
          color: #d3d6dd;
          margin-right: 5px;
        }

        select {
          padding: 6px 10px;
          border: 1px solid rgba(104, 216, 254, 0.5);
          background-color: rgba(19, 25, 47, 0.8);
          color: #d3d6dd;
          border-radius: 4px;
          outline: none;

          option {
            background-color: #13192f;
          }
        }
      }
    }
  }

  .table-container {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;

    table {
      width: 100%;
      border-collapse: collapse;

      th,
      td {
        padding: 10px;
        text-align: center;
        border: 1px solid rgba(104, 216, 254, 0.3);
      }

      th {
        background-color: rgba(104, 216, 254, 0.1);
        color: #68d8fe;
        font-weight: bold;
        position: sticky;
        top: 0;
        z-index: 1;
      }

      td {
        color: #d3d6dd;
      }

      tr:nth-child(even) {
        background-color: rgba(19, 25, 47, 0.5);
      }

      tr:hover {
        background-color: rgba(104, 216, 254, 0.1);
      }

      .rating-good {
        color: #67c23a;
        font-weight: bold;
      }

      .rating-medium {
        color: #e6a23c;
        font-weight: bold;
      }

      .rating-bad {
        color: #f56c6c;
        font-weight: bold;
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: auto;

    button {
      padding: 6px 12px;
      background-color: rgba(104, 216, 254, 0.1);
      border: 1px solid rgba(104, 216, 254, 0.5);
      color: #d3d6dd;
      border-radius: 4px;
      cursor: pointer;

      &:hover:not(:disabled) {
        background-color: rgba(104, 216, 254, 0.2);
      }

      &:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }

    span {
      color: #d3d6dd;
    }
  }
}
</style>
